<template>
  <el-card shadow="never" :style="{ height: '100%' }">
    <el-row :gutter="24">
      <el-col :md="6">
        <role-list
          ref="roleList"
          @perTreeChange="handlePerTreeChange"
          @treeChange="handleTreeChange"
          @setFields="handleSetFileds"
        />
      </el-col>
      <el-col :md="8">
        <role-form
          @reset="handleReset"
          @treeClear="handleTreeClear"
          @refreshList="handleRefreshList"
          @changeRole="handleChangeRole"
          ref="roleForm"
        />
      </el-col>
      <el-col :md="5">
        <span>菜单管理：</span>
        <x-tree :treeData="treeData" :checkable="true" @treeCheck="handleTreeCheck" ref="roleTree" />
      </el-col>
      <el-col :md="5">
        <span>权限管理：</span>
        <x-tree
          :treeData="permissionData"
          :checkable="true"
          @treeCheck="handlePermissionCheck"
          ref="permissionTree"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import RoleList from './RoleList'
import RoleForm from './RoleForm'
import XTree from '@/components/XTree'
import { getMenuTree } from '@/api/menu'
import { getPermissionTree } from '@/api/role'
import { asyncRouterMap } from '@/config/router.config.js'

export default {
  name: 'RoleIndex',
  components: {
    RoleList,
    RoleForm,
    XTree
  },
  data() {
    return {
      treeData: [],
      permissionData: []
    }
  },
  created() {
    getMenuTree().then(res => {
      this.treeData = res.data
    })
    getPermissionTree().then(res => {
      this.permissionData = res.data
    })
  },
  methods: {
    // handleData(arr) {
    //   arr.map(v => {
    //     v.title = v.title
    //     v.key = v.key
    //     if (v.children && v.children.length > 0) {
    //       this.handleData(v.children)
    //     }
    //   })
    //   return arr
    // },
    handleReset() {
      this.handleTreeClear()
      this.$refs.roleList.edit({}, 1000)
    },
    handleSetFileds(mdl) {
      this.$refs.roleForm.handleSetFields(mdl)
    },
    // 菜单树设置值
    handleTreeChange(arr) {
      this.$refs.roleTree.getKeys(arr)
      this.$refs.permissionTree.getKeys(arr)
    },
    // 点击左侧给权限树设置值
    handlePerTreeChange(arr) {
      this.$refs.permissionTree.getKeys(arr)
    },
    handleTreeClear() {
      this.$refs.roleTree.getKeys([])
      this.$refs.permissionTree.getKeys([])
    },
    // 点击菜单树给form传值
    handleTreeCheck(arr) {
      this.$refs.roleForm.getKeys(arr)
    },
    handlePermissionCheck(arr) {
      this.$refs.roleForm.getPermissionKeys(arr)
    },
    handleChangeRole() {
      this.$refs.roleList.changeRole()
    },
    handleRefreshList() {
      this.$refs.roleList.getRoleList(true)
    }
  }
}
</script>
